<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网易云音乐</title>
    <!--可以让部分国产浏览器默认采用高速模式渲染页面-->
    <meta content="webkit" name="renderer">
    <!--为了让 IE 浏览器运行最新的渲染模式下-->
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="网易云音乐，音乐，播放器，网易，下载，播放，DJ，免费，明星，精选，歌单，识别音乐，收藏，分享音乐，音乐互动，高音质，320K，音乐社交，官网，移动站，music.163.com"
          name="keywords">
    <meta content="网易云音乐是一款专注于发现与分享的音乐产品，依托专业音乐人、DJ、好友推荐及社交功能，为用户打造全新的音乐生活。" name="description">
    <script>
        //获取当前设备像素比
        let scale = 1 / parseInt(window.devicePixelRatio + "");
        document.write(`<meta name="viewport" content="width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no">`);
        let rootSize = window.innerWidth / 7.5 + "px";
        document.documentElement.style.fontSize = rootSize;
    </script>
    <link href="../favicon.ico" rel="short icon">
    <link href="../apple-touch-icon.png" rel="apple-touch-icon">
    <link href="../apple-touch-icon114.png" rel="apple-touch-icon" sizes="114x114">
    <link href="../apple-touch-icon152.png" rel="apple-touch-icon" sizes="152x152">
    <link href="../apple-touch-icon180.png" rel="apple-touch-icon" sizes="180x180">
    <link href="../css/reset.css" rel="stylesheet">
    <link href="../css/swiper.css" rel="stylesheet">
    <link href="css/djDetail.less" rel="stylesheet/less">
</head>
<body>
<!--头部开始-->
<div class="header">
    <div class="header-center-in">
        <div class="header-center">
            <span>电台</span>
        </div>
    </div>
    <div class="header-left">
        <img alt="" src="images/detail-it666-back.png">
    </div>
    <div class="header-right">
        <img alt="" class="share" src="images/detail-it666-share.png">
        <img alt="" class="playing" src="images/detail-it666-playing.png">
    </div>
</div>
<!--头部结束-->

<!--内容开始-->
<div class="main">
    <div class="main-in">
        <div class="main-top">
            <div class="bg">
                <img alt="">
                <div class="modal"></div>
            </div>
            <div class="top-info"></div>
        </div>
        <div class="main-bottom">
            <div class="bottom-content"></div>
        </div>
    </div>
</div>
<!--内容结束-->

<!--底部开始-->
<div class="footer-box"></div>
<!--底部结束-->
<script id="info" type="text/html">
    <div class="info-left">
        <p class="title"><%=name%></p>
        <p class="subscribe"><%=subCount%>订阅</p>
    </div>
    <div class="info-right">
        <img alt="" src="images/favorite-it666-star.png">
        订阅
    </div>
</script>
<script id="comment" type="text/html">
    <div class="bottom-nav">
        <div class="nav-left active">
            详情
        </div>
        <div class="nav-right">
            节目
            <span><%=programCount%></span>
        </div>
        <i></i>
    </div>
    <div class="bottom-container">
        <div class="detail active">
            <div class="info">
                <div class="info-top">
                    主播
                </div>
                <div class="info-bottom">
                    <div class="info-bottom-left">
                        <div class="pic">
                            <img alt=""
                                 src="<%=dj.avatarUrl%>">
                            <% if(dj.userType === 2) {%>
                            <img src="images/detail-it666-vrenzhen.png" alt="">
                            <% } else if (dj.userType === 4) {%>
                            <img src="images/detail-it666-daren.png" alt="">
                            <% } else if (dj.userType === 201){%>
                            <img src="images/detail-it666-yinyueren.png" alt="">
                            <% } %>
                        </div>
                        <div class="song-info">
                            <p class="singer-name"><%=dj.nickname%></p>
                            <% if(dj.experts) {%>
                            <p class="personality"><%=dj.experts[1]%></p>
                            <% } else {%>
                            <p class="personality"><%=dj.signature%></p>
                            <% } %>
                        </div>
                    </div>
                    <div class="info-bottom-right">
                        赞赏
                    </div>
                </div>
            </div>
            <div class="desc">
                <p class="desc-top">电台内容简介</p>
                <p class="desc-title"><%=desc%></p>
            </div>
            <div class="comment">
                <p class="comment-title">精彩评论</p>
                <ul class="comment-by">
                    <% for(let i = 0; i < commentDatas.length; i++) {%>
                    <li>
                        <div class="comment-left">
                            <img alt=""
                                 src="<%=commentDatas[i].userProfile.avatarUrl%>">
                        </div>
                        <div class="comment-right">
                            <p class="by"><%=commentDatas[i].userProfile.nickname%></p>
                            <p class="content"><%=commentDatas[i].content%></p>
                            <p class="cover-by">---------<%=commentDatas[i].programName%></p>
                        </div>
                    </li>
                    <% } %>
                </ul>
            </div>
        </div>
        <div class="program">
        </div>
    </div>
</script>
<script id="program" type="text/html">
    <div class="tool-bar">
        <div class="tool-default">
            <div class="default-left">
                共<%=count%>期
            </div>
            <div class="default-right">
                <div class="sort">
                    <img alt="" src="images/detail-small-arrow.png">
                    排序
                </div>
                <div class="all-selected">
                    <img alt="" src="images/detail-it666-menu.png">
                    多选
                </div>
            </div>
        </div>
        <div class="tool-selected">
            <div class="selected-left">
                <div class="circle"></div>
                全选
            </div>
            <div class="selected-right">
                完成
            </div>
        </div>
    </div>
    <ul class="musicList">
        <% for(let i = 0; i < programs.length; i++) {%>
        <li class="sta">
            <div class="list-left">
                <div class="list-circle"></div>
                <div class="num"><%=i + 1%></div>
                <div class="music">
                    <p class="music-name"><%=programs[i].mainSong.name%></p>
                    <p class="music-desc">
                        <span class="time"><%=programs[i].formatCreateTime%></span>
                        <span class="playCount">
                                            <img alt="" src="images/detail-small-playing.png">
                                            <%=programs[i].formatListenerCount%>
                                            </span>
                        <span class="durations">
                                            <img alt="" src="images/detail-small-time.png">
                                            <%=programs[i].mainSong.formatDuration%>
                                        </span>
                    </p>
                </div>
            </div>
            <div class="list-right">
                <img alt="" src="images/detail-small-more.png">
            </div>
        </li>
        <% } %>
    </ul>
</script>
<!--模板开始-->
<!--模板结束-->
<script src="../js/less.js"></script>
<script src="../js/zepto.js"></script>
<script src="../js/event.js"></script>
<script src="../js/ajax.js"></script>
<script src="../js/fx.js"></script>
<script src="../js/fx_methods.js"></script>
<script src="../js/selector.js"></script>
<script src="../js/iscroll-probe.js"></script>
<script src="../js/swiper.js"></script>
<script src="../js/axios.js"></script>
<script src="../js/api.js"></script>
<script src="../js/template-web.js"></script>
<script src="../js/clamp.js"></script>
<script src="../js/tool.js"></script>
<script src="../js/loadHtml.js"></script>
<script src="js/djDetail.js"></script>
</body>
</html>